<template>
  <div class="payment-plan">
    <!--    start left-->
    <div class="left">
      <div class="price-info">
        <div class="price-item">
          <div class="name">总应收</div>
          <div class="value">¥{{ baseInfo.planCollection }}</div>
        </div>
        <div class="price-item">
          <div class="name">已收</div>
          <div class="value red-color">¥{{ baseInfo.inFactCollection }}</div>
        </div>
      </div>
      <div class="contract-list">
        <div
          class="contract-item"
          v-for="(item, index) in baseInfo.collectionPlanBOList"
          @click="constractTabChange(item, index)"
          :class="['contract-item', currentTabIndex == index ? 'contract-item-active' : '']"
        >
          <div class="name">{{ item.contractName }}</div>
          <div class="value">{{ item.inFactCollection }}/{{ item.planCollection }}</div>
        </div>
      </div>
    </div>
    <!--    end left-->
    <!--    start right-->
    <div class="right" ref="elementRef">
      <div class="warn-tips" v-if="!contractInfo.status && isLoaded && baseInfo.collectionPlanBOList.length > 0">
        <el-icon color="#FF3333" style="position: relative; top: 2px">
          <WarningFilled />
        </el-icon>
        <span class="state">异常</span>
        <span class="text">差进度款¥{{ contractInfo.imbalanceMoney }}，已拖延{{ contractInfo.delayTime }}天</span>
      </div>
      <div class="process-content">
        <div class="top">
          <div
            class="pay-item"
            v-for="topItem in topList"
            :style="{ left: topItem.handleDistance + 'px', top: topItem.taskStatus == 4 ? '-120px' : '' }"
          >
            <div class="pay-name">{{ topItem.receiveTaskName }}</div>
            <template v-if="topItem.taskStatus != 4">
              <div class="pay-process">进度：￥{{ topItem.planMoney }}</div>
              <div class="pay-time" v-if="[0, 1, 2].includes(topItem.taskStatus) || topItem.approvalStatus == 3">
                预计完成：{{ topItem.planCompleteTime }}
              </div>
              <div class="pay-time" v-if="topItem.taskStatus == 3 && topItem.approvalStatus != 3">
                完成日期：{{ topItem.completeTime }}
              </div>
              <div :class="['pay-state', payStateObj[topItem.payStatus][1]]">{{ payStateObj[topItem.payStatus][0] }}</div>
            </template>
            <div class="no-task" v-if="topItem.taskStatus == 4">无该任务信息</div>
            <div class="pay-img">
              <img src="../../../../../assets/images/image/processLine.png" />
            </div>
          </div>
        </div>
        <div class="center" v-if="contractInfo.collectionNodes.length > 0">
          <div
            class="process-item"
            v-for="processItem in contractInfo.collectionNodes"
            :style="{ width: processItem.handleWidth + 'px' }"
          ></div>

          <div class="complete-process" :style="{ width: completeProcess + 'px' }"></div>
          <div class="complete-text" :style="{ left: completeProcess + 'px' }">{{ contractInfo.proportion }}</div>
        </div>
        <div class="bottom">
          <div class="pay-item" v-for="bottomItem in bottomList" :style="{ left: bottomItem.handleDistance + 'px' }">
            <div class="pay-img">
              <img src="../../../../../assets/images/image/processLine.png" />
            </div>
            <div class="pay-name">{{ bottomItem.receiveTaskName }}</div>
            <template v-if="bottomItem.taskStatus != 4">
              <div class="pay-process">进度：￥{{ bottomItem.planMoney }}</div>
              <div class="pay-time" v-if="[0, 1, 2].includes(bottomItem.taskStatus) || bottomItem.approvalStatus == 3">
                预计完成：{{ bottomItem.planCompleteTime }}
              </div>
              <div class="pay-time" v-if="bottomItem.taskStatus == 3 && bottomItem.approvalStatus != 3">
                完成日期：{{ bottomItem.completeTime }}
              </div>
              <div :class="['pay-state', payStateObj[bottomItem.payStatus][1]]">{{ payStateObj[bottomItem.payStatus][0] }}</div>
            </template>
            <div class="no-task" v-if="bottomItem.taskStatus == 4">无该任务信息</div>
          </div>
        </div>
      </div>
      <template v-if="isLoaded">
        <div class="no-data" v-if="baseInfo.collectionPlanBOList.length > 0 && contractInfo.collectionNodes.length == 0">
          <img src="../../../../../assets/images/image/noSetting.png" />
          <div class="tips">尚未设置收款计划</div>
        </div>
        <div class="no-data" v-if="baseInfo.collectionPlanBOList.length == 0">
          <img src="../../../../../assets/images/image/noSetting.png" />
          <div class="tips">暂无合同</div>
        </div>
      </template>
    </div>
    <!--    end right-->
  </div>
</template>
<script setup>
import { ref, onMounted, onUnmounted } from "vue";
import { WarningFilled } from "@element-plus/icons-vue";
import { useRoute } from "vue-router";
import { payPlanBaseInfo, constractListByOrderNo } from "@/apis/myClient";

const route = useRoute();
const customerId = route.query.customerId;

const payStateObj = {
  1: ["待收款", "unpaid-state"],
  2: ["已收款", "complete-state"],
  3: ["未付款", "pending-state"]
};

//合同tab
const currentTabIndex = ref(0);
const constractTabChange = (item, index) => {
  currentTabIndex.value = index;
  getDetailByOrder(item.orderCode);
};

//模拟数据
// const payPlanInfo = {
//   percent: 0.01,
// proportion:"1%",
//   collectionNodes: [
//     {
//       receiveTaskName: "土建完成1",
//       process: "¥2200.00",
//       taskStatus: "1",
//       approvalStatus: "1",
//       percent: 0.1,
//       receiveTaskScale: "12",
//       addPercent: 0.1,
//       payStatus: 1,
//       completeTime: ""
//     },
//     {
//       receiveTaskName: "土建完成2",
//       process: "¥7878.00",
//       approvalStatus: "1",
//       taskStatus: "1",
//       payStatus: 1,
//       receiveTaskScale: "12",
//       percent: 0.2,
//       addPercent: 0.3,
//       planCompleteTime: "",
//       completeTime: ""
//     },
//     {
//       receiveTaskName: "土建完成3",
//       process: "¥7878.00",
//       receiveTaskScale: "12",
//       approvalStatus: "1",
//       taskStatus: "1",
//       payStatus: 1,
//       percent: 0.5,
//       addPercent: 0.8,
//       planCompleteTime: "",
//       completeTime: ""
//     },
//     {
//       receiveTaskName: "土建完成4",
//       process: "¥7878.00",
//       receiveTaskScale: "12",
//       approvalStatus: "1",
//       taskStatus: "1",
//       payStatus: 1,
//       percent: 0.2,
//       addPercent: 1,
//       planCompleteTime: "",
//       completeTime: ""
//     }
//   ]
// };

//合同信息
const isLoaded = ref(false);
const elementRef = ref(null);
const contentWidth = ref(0);
const completeProcess = ref(0);
const topList = ref([]);
const bottomList = ref([]);
const baseInfo = ref({});
const contractInfo = ref({ collectionNodes: [] });

const getContractInfo = async () => {
  const { data } = await payPlanBaseInfo(customerId);
  baseInfo.value = data;
  const defaultOrderCode = baseInfo.value?.collectionPlanBOList[0]?.orderCode;
  if (defaultOrderCode) {
    getDetailByOrder(defaultOrderCode);
  } else {
    isLoaded.value = true;
  }
};
const getDetailByOrder = async code => {
  const { data } = await constractListByOrderNo(code);
  contractInfo.value = data;
  console.log(contractInfo.value);
  // contractInfo.value = payPlanInfo;
  if (contractInfo.value.collectionNodes) {
    handleData();
  }
  isLoaded.value = true;
};
//处理数据
const handleData = () => {
  const arr = contractInfo.value.collectionNodes;
  console.log(arr);
  if (elementRef.value) {
    contentWidth.value = elementRef.value.clientWidth - 220;
    // completeProcess.value = (contentWidth.value * payPlanInfo.value.totolProcess).toFixed(0);
    completeProcess.value = accMul(contentWidth.value, contractInfo.value.percent).toFixed(0);
    //处理结构
    arr.map(item => {
      item.handleWidth = accMul(item.percent, contentWidth.value);
      item.handleDistance = accMul(item.addPercent, contentWidth.value);
    });

    topList.value = arr.filter((item, index) => index % 2 != 0);
    bottomList.value = arr.filter((item, index) => index % 2 == 0);
    console.log("toplist", topList.value);
  }
};

//浮点数乘法
function accMul(arg1, arg2) {
  var m = 0,
    s1 = arg1.toString(),
    s2 = arg2.toString();
  try {
    m += s1.split(".")[1].length;
  } catch (e) {}
  try {
    m += s2.split(".")[1].length;
  } catch (e) {}
  return (Number(s1.replace(".", "")) * Number(s2.replace(".", ""))) / Math.pow(10, m);
}

onMounted(() => {
  getContractInfo();
  window.addEventListener("resize", handleData);
});
onUnmounted(() => {
  window.removeEventListener("resize", handleData);
});
</script>

<style scoped lang="scss">
.red-color {
  color: #ff3333 !important;
}

.payment-plan {
  //margin: 10px 0px;
  height: 100%;
  display: flex;

  .left {
    width: 360px;
    //height: 100vh;
    height: 100%;
    overflow-y: scroll;
    background: #f2f3f5;
    border-right: 1px solid #e1e6ed;

    .price-info {
      background: #fff;
      border-bottom: 1px solid #e1e6ed;
      padding: 20px;

      .price-item {
        font-size: 18px;
        display: flex;
        justify-content: space-between;

        &:first-child {
          margin-bottom: 20px;
        }

        .name {
          color: #86909c;
        }

        .value {
          color: #3d3d3d;
          font-weight: bold;
        }
      }
    }

    .contract-list {
      padding-bottom: 60px;

      .contract-item {
        display: flex;
        cursor: pointer;
        justify-content: space-between;
        align-items: center;
        width: calc(100% - 70px);
        background: #fff;
        margin-top: 20px;
        margin-left: 20px;
        padding: 22px 15px;
        border-radius: 10px;
        box-shadow: 0px 0px 10px 0px rgba(134, 144, 156, 0.1);
        font-size: 14px;

        .name {
          color: #191919;
        }

        .value {
          font-size: 12px;
          color: #86909c;
        }

        &.contract-item-active {
          border: 2px solid #007dff;
        }
      }
    }
  }

  /* 隐藏垂直滚动条 */
  .left::-webkit-scrollbar {
    width: 0;
  }

  /* 隐藏水平滚动条 */
  .left::-webkit-scrollbar {
    height: 0;
  }

  .right {
    width: 100%;
    position: relative;

    .warn-tips {
      background: #ffd8d2;
      padding: 10px 25px;

      .state {
        width: 56px;
        height: 20px;
        background: #ffc7c7;
        color: #ff3333;
        border-radius: 3px;
        border: 1px solid #fff;
        font-size: 12px;
        display: inline-block;
        text-align: center;
        line-height: 20px;
        margin-right: 8px;
        margin-left: 8px;
      }

      .text {
        font-size: 14px;
        color: #3d3d3d;
      }
    }

    .no-data {
      text-align: center;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);

      img {
        width: 220px;
      }

      .tips {
        font-size: 14px;
        color: #86909c;
      }
    }

    .process-content {
      width: calc(100% - 200px);
      //margin: 0px 100px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -70%);

      .top,
      .bottom {
        position: relative;

        .pay-item {
          width: 160px;
          position: absolute;
          text-align: center;
          display: inline-block;
          transform: translateX(-50%);

          .pay-name {
            font-size: 16px;
            color: #000;
            font-weight: bold;
            white-space: nowrap;
          }

          .pay-process {
            font-size: 14px;
            color: #3d3d3d;
            margin: 10px 0px;
            white-space: nowrap;
          }

          .pay-time {
            font-size: 14px;
            color: #606266;
            white-space: nowrap;
          }

          .pay-state {
            font-size: 12px;
            padding: 5px 8px;
            display: inline-block;
            margin-top: 10px;
            margin-bottom: 20px;
            border-radius: 2px;

            &.complete-state {
              background: #e3f9e9;
              color: #14c85c;
            }

            &.pending-state {
              background: #fff0d9;
              color: #ff9900;
            }

            &.unpaid-state {
              background: #ffe1e1;
              color: #f53f3f;
            }
          }

          .pay-img {
            img {
              width: 28px;
            }
          }
        }
      }

      .top {
        .pay-item {
          top: -230px;
        }

        .no-task {
          margin-bottom: 10px;
        }
      }

      .center {
        //display: flex;
        width: 100%;
        background: #e1e6ed;
        height: 40px;
        border-radius: 50px;
        position: relative;

        .process-item {
          text-align: center;
          border-right: 1px solid #fff;
          display: inline-block;
          float: left;
          height: 100%;
        }

        .complete-process {
          position: absolute;
          left: 0px;
          top: 0px;
          width: 50%;
          height: 40px;
          background: #007dff;
          border-radius: 50px;
        }

        .complete-text {
          position: absolute;
          top: -40px;
          width: 50px;
          height: 30px;
          background: url("../../../../../assets/images/image/currentProcess.png");
          background-size: 50px 30px;
          text-align: center;
          line-height: 25px;
          font-size: 12px;
          color: #fff;
        }
      }

      .bottom {
        .pay-img img {
          transform: rotate(180deg);
        }

        .no-task {
          margin-top: 10px;
        }
      }
    }
  }
}
</style>
